<!--
 * @Date: 2023-03-04 15:26:32
 * @LastEditors: Zireael 1193875164@qq.com
 * @LastEditTime: 2023-04-09 21:34:03
 * @FilePath: \A19\frontend\src\components\Lv2_Course.vue
-->
<template>
  <div id="MainMenu" class="container">

    <div id="navi" class="ver title">

      <div class="self">
        <ElImage :src="conf.server + currentUser.portrait" class="miniAvatar" fit="cover"></ElImage>

        <el-dropdown>
          <span class="el-dropdown-link">
            {{ currentUser.name }}
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="mine"><el-link>个人中心</el-link></el-dropdown-item>
              <el-dropdown-item @click="logout"><el-link>退出登录</el-link></el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>

    </div>

    <div id="main" class="line">
      <div id="leftNavi">
        <ElImage class="avatar" :src="conf.server + courseInfo?.cover" fit="cover"></ElImage>
        <div id="title">{{ courseInfo?.name }}</div>
        <div id="options">
          <div class="link">
            <el-link @click="router.replace({ name: 'homework', params: { courseId: currentCourseId } })"><el-icon>
                <Document />
              </el-icon>作业</el-link>
          </div>
          <div class="link">
            <el-link @click="router.replace({ name: 'exam', params: { courseId: currentCourseId } })"><el-icon>
                <DocumentChecked />
              </el-icon>考试</el-link>
          </div>
          <div class="link">
            <el-link @click="router.replace({ name: 'experiments', params: { courseId: currentCourseId } })"><el-icon>
                <Orange />
              </el-icon>实验</el-link>
          </div>
          <div class="link">
            <el-link @click="router.replace({ name: 'discuss', params: { courseId: currentCourseId } })"><el-icon>
                <ChatSquare />
              </el-icon>讨论</el-link>
          </div>
          <div class="link">
            <el-link @click="router.replace({ name: 'source', params: { courseId: currentCourseId } })"><el-icon>
                <FolderOpened />
              </el-icon>资源</el-link>
          </div>
          <div class="link">
            <el-link @click="router.push({ name: 'analysis', params: { courseId: currentCourseId } })"><el-icon>
                <DataLine />
              </el-icon>统计分析</el-link>
          </div>
          <div class="link">
            <el-link @click="router.push({ name: 'theCourse', params: { courseId: currentCourseId } })"><el-icon>
                <EditPen />
              </el-icon>{{ poss?'编辑课程':'课程信息' }}</el-link>
          </div>
          <div class="link" v-if="poss">
            <el-link @click="router.push({ name: 'liveSend', params: { courseId: currentCourseId } })"><el-icon>
                <Monitor />
              </el-icon>开始上课</el-link>
          </div>
          <div class="link" v-else>
            <el-link @click="router.push({ name: 'liveReceive', params: { courseId: currentCourseId } })"><el-icon>
              <ChatLineSquare />
            </el-icon>进入课堂</el-link>
          </div>
        </div>
      </div>

      
      
      <div id="socket">
        <RouterView :key="$route.fullPath"></RouterView>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import router from '@/route';
import { useRoute } from 'vue-router';
import { computed, onMounted, ref, provide, inject } from 'vue';
import { useClientStore } from '../pinia/stores/client';
import { storeToRefs } from 'pinia';
import { courses } from '../shared/types/courses';
import { conf } from '@/utils/conf';

const store = useClientStore()
const { currentUser, currentCourseId } = storeToRefs(store)
const route = useRoute();
const poss = computed(() => {
  return currentUser.value.role === 'teacher'
})

// provide('poss',poss)
// provide('idForSource',route.query.id as string)
const client = useClientStore().client

const courseInfo = ref<courses>()
provide('courseInfo',courseInfo)

const key = computed(() => {
  return route.path + Math.random();
});

const mine = () => {
  router.push({
    name: 'mine'
  })
}
const logout = () => {
  localStorage.removeItem('token')
  router.push({
    path: '/main/login'
  })
}

onMounted(async () => {
  const ret = await client.callApi('Get/GetCourseInfo', {
    course: currentCourseId.value
  })
  if (ret.isSucc) {
    courseInfo.value = ret.res.courseInfo
  }

})
</script>

<style lang="less" scoped>
* {
  // margin: 0;
  // padding: 0;
  // overflow-x: hidden;

}

#MainMenu {
  position: absolute;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: #f2f4f7;
  // display: flex;

  #navi {
    width: 100%;
    height: 60px;
    background-color: #ffffff;
    border-radius: 5px;
    // box-shadow: var(--el-box-shadow-light);

    // .miniAvatar {
    //   width: 35px;
    //   height: 35px;
    //   border-radius: 25px;
    //   background-size: contain;
    //   position: absolute;
    //   top: 4px;
    //   right: 100px;
    //   background-image: url(../public/icon.png);
    // }

    .el-dropdown {
      // position: absolute;
      // background-color: rgba(253, 253, 253, 0);
      // height: 5vh;
      // right: 10px;
      // top: 2px;
      // text-align: center;
      // line-height: 5vh;
      // color: #a6a6a6;
    }




  }

  #main {
    position: relative;
    // width: 100vw;
    // height: 700px;
    left: 0px;
    right: 0px;
    margin: 0 auto;
    top: 20px;
    background-color: #f2f4f7;
    padding-top: 0;
    height: calc(100% - 40px);
    z-index: 0;

    #socket {
      // position: absolute;
      // width: 1112px;
      // height: 640px;
      // left: 305px;
      // top: 20px;
      background-color: rgb(255, 255, 255);
      // margin: 10px;
      border-radius: 5px;
      box-shadow: var(--el-box-shadow-light);
      // overflow: hidden;
      position: relative;
    }

    #leftNavi {
      min-width: 200px;
      // position: absolute;
      // width: 155px;
      // height: 640px;
      // margin: 10px;
      background-color: rgb(255, 255, 255);
      border-radius: 5px;
      // top: 20px;
      // left: 115px;
      box-shadow: var(--el-box-shadow-light);
      overflow: auto;
      // @import url('@/less/scroller.less');
      &::-webkit-scrollbar-thumb {
          background-color: rgba(163, 163, 163,0.4);
          border-radius: 2.5px;
      }
      &::-webkit-scrollbar {
        width: 5px;
        cursor: pointer;
    }

      #title {
        width: 100%;
        height: 40px;
        position: relative;
        text-align: center;
        line-height:40px;
        background-color: rgba(255, 255, 255, 0);
        padding: 0 20px;
        margin: 10px 0;
      }

      #options {
        position: relative;
        // top: 140px;
        // width: 155px;
        // height: 450px;
        // display: flex;
        background-color: rgb(255, 255, 255);
        // display: flex;

        :hover {
          background-color: aliceblue;

        }

        .link {
          // width: 155px;
          // height: 60px;
          // box-shadow: var(--el-box-shadow-light);


          .el-link {
            width: 100%;
            height: 60px;
            align-items: center;
            font-size: 16px;
          }
        }






      }
    }

    .avatar {
      // position: absolute;
      width: 90%;
      min-width: 160px;
      // height: 100px;
      aspect-ratio: 16 / 9;
      background-size: 100%;
      // left: 150px;
      // top: 50px;
      border-radius: 5px;
      box-shadow: var(--el-box-shadow);
      display: block;
      position: relative;
      margin: 30px auto;
      margin-bottom: 0;
    }


    .el-aside {
      position: relative;
      top: 150px;
      z-index: 2;

    }





    #buttons {
      position: absolute;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: flex-end;
      width: 10vw;
      height: 70vh;
      top: 20vh;
    }
  }


}</style>